<template>
  <div class="transferred-course">
    <Nav
      class="course-back"
      backTitle="选择调入班级"
    />
    <div class="tips">
      <span>温馨提示：</span>调入的班级与原班级的科目、年级、层级、讲次信息保持一致！
    </div>
    <div class="info">调出班级：{{className}}&nbsp;第{{lecture}}讲</div>
    <div class="all-condit">
      <ul class="condit-head">
        <li @click="selectAddr">
          <span class="show-text">{{show.area}}</span>
          <img src='../assets/img/down-gray.png' />
          <!-- <img v-else src='../../assets/img/up-green.png' /> -->
          <span class="line"></span>
        </li>
      </ul>
    </div>
    <ul
      v-if="courseList.length"
      class="course-list"
    >
      <li
        class="course-li"
        v-for="(item,index) in courseList"
        v-if="item"
      >
        <div class="course-select">
          <span>
            <input
              type="radio"
              name="course"
              v-model="selectedCourseId"
              :value="item.classId"
            >
            <label></label>
          </span>
        </div>
        <div class="course-detail" @click="checkedClick(item)">
          <course-message
            :showTeacher="true"
            :item="item"
            :hasAddress="true"
            :hasPeriodNo="false"
          />
        </div>
      </li>
    </ul>
    <empty v-show="showEmpty" />
    <div
      @click="handleNext"
      class="icon-next"
    >调入此班</div>
    <div
      class="confirm-info-mask"
      @click="showConfirmInfo = false"
      v-if="showConfirmInfo"
    ></div>
    <div
      class="confirm-info"
      v-if="showConfirmInfo"
    >
      <div class="wrapper">
        <h2>提示</h2>
        <div>
          <div class="title">待调讲次：第{{lecture}}讲</div>
          <course-message
            class="content"
            :showTeacher="true"
            :item="shiftOutCourse"
            :hasAddress="true"
            :hasPeriodNo="false"
          />
        </div>
        <div>
          <div class="title last-title">
            调入讲次：第{{lecture}}讲
            <div class="dire-icon"></div>
          </div>
          <course-message
            class="content"
            :showTeacher="true"
            :item="shiftInCourse"
            :hasAddress="true"
            :hasPeriodNo="false"
          />
        </div>
      </div>
      <div class="confirm-info-footer">
        <span @click="showConfirmInfo = false">取消</span>
        <span @click="handleConfirm">确认</span>
      </div>
    </div>
    <SelectFilter
      ref="selectFilter"
      @closeFilterBlockFunc="closeFilterBlockFunc"
      @selectTypeIndex="selectTypeIndex"
      :filterData="condition.campus"
      :queryId="query.campusIds"
      :title="'上课地点'"
    ></SelectFilter>
  </div>
</template>

<script>
import TopSearch from 'components/TopSearch'
import SelectFilter from 'components/SelectFilter'
import Nav from 'components/nav/nav.vue'
import CourseMessage from 'components/course/courseMessage.vue'
import Empty from 'components/empty.vue'
import api from 'util/xhr'
import drag from 'components/drag/drag'
import 'components/drag/drag.css'

export default {
  components: {
    TopSearch,
    CourseMessage,
    Empty,
    Nav,
    SelectFilter
  },
  data() {
    return {
      hasLogin: sessionStorage.getItem('accessToken') ? true : false,
      backUrl: document.location.href,
      cartNum: 0,
      showEmpty: false,
      selectType: 0,
      selectedCourseId: '',
      showConfirmInfo: false,
      courseList: [],
      shiftOutCourse: {},
      show: {
        area: '上课校区'
      },
      condition: {
        gradeAndSubject: [],
        campus: {},
        seasonAndTime: []
      },
      query: {
        city: sessionStorage.getItem('city') || '',
        segment: '',
        gradeNames: '',
        subjectName: '',
        district: '',
        campusIds: '',
        season: '',
        timeInterval: '',
        lecture: '',
        classId: '',
        className: ''
      },
      areaKey: ''
    }
  },
  watch: {
    selectType(newVal) {
      if (newVal !== 0) {
        document.body.classList.add('condition-dialog-open')
      } else {
        document.body.classList.remove('condition-dialog-open')
      }
    },
    showConfirmInfo(newVal) {
      if (newVal) {
        document.body.classList.add('condition-dialog-open')
      } else {
        document.body.classList.remove('condition-dialog-open')
      }
    }
  },
  computed: {
    shiftInCourse() {
      let o = {}
      this.courseList.map(val => {
        if (this.selectedCourseId === val.classId) {
          o = val
        }
      })
      return o
    }
  },
  created() {
    this.shiftOutCourse = JSON.parse(this.$route.query.courseInfo)
    this.className = this.shiftOutCourse.className
    this.classId = this.shiftOutCourse.classId
    this.lecture = this.$route.query.lecture
    this.attendClassRecordId = this.$route.query.attendClassRecordId
    this.search()
    this.loadCondition()
  },
  mounted() {
    $(window).scrollTop(0)
  },
  beforeDestroy() {
    document.body.classList.remove('condition-dialog-open')
  },
  methods: {
    checkedClick(item){
      this.selectedCourseId = item.classId
    },
    closeFilterBlockFunc() {
      document.body.classList.remove('condition-dialog-open')
    },
    selectTypeIndex(item, index) {
      if (item == '') {
        // 不限
        this.query.campusIds = ''
        this.show.area = '全部区域'
      } else {
        this.query.campusIds = item.campusId
        this.show.area = item.campusName
      }

      this.afterSelect()
    },
    selectAddr() {
      this.selectType = 2
      this.$refs.selectFilter.showBlock = true

      this.$nextTick(() => {
        document.querySelector('.more-block').classList.remove('off-more-width')
        document.querySelector('.more-block').classList.add('on-more-width')
      })
    },
    handleConfirm() {
      api
        .post('/api/m/confirmShiftClass', {
          shiftOutAttendClassRecordId: this.attendClassRecordId,
          shiftInClassId: this.shiftInCourse.classId,
          shiftLectureNo: this.lecture
        })
        .then(
          data => {
            this.showConfirmInfo = false
            document.body.classList.remove('condition-dialog-open')
            this.$toast({content:'恭喜您！调课成功！'})
            this.$router.push('/')
          },
          desc => {
           this.$alert({ content: desc })
          }
        )
    },
    handleNext() {
      if (!this.selectedCourseId) {
        this.$alert({ content: '请选择调入班级！' })
        return
      }
      this.showConfirmInfo = true
    },
    back() {
      history.go(-1)
    },
    afterSelect() {
      this.selectType = 0
      this.resetCondit()
      this.search()
    },
    resetCondit() {
      this.courseList = []
    },
    loadCondition() {
      let con = sessionStorage.getItem('config')
      if (con) {
        this.condition = JSON.parse(con)
      } else {
        api
          .post('/api/m/campusOfAreaTeam', {
            areaTeamId: sessionStorage.getItem('globalAreaTeamId')
          })
          .then(data => {
            this.condition.campus = data
            this.initAreaKey()
          },(desc)=>{
             this.$alert(desc)
          })
      }
    },
    initAreaKey() {
      let count = 1
      for (var key in this.condition.campus) {
        if (count > 1) break
        if (count == 1) {
          this.areaKey = key
        }
        count++
      }
    },
    search() {
      api
        .post('/api/m/availableShiftInCourseClasses', {
          shiftOutLectureNo: this.lecture,
          shiftOutClassId: this.classId,
          campusId: this.query.campusIds
        })
        .then(data => {
          let list = []
          data.map(val => {
            if (val.classId !== this.shiftOutCourse.classId) {
              list.push(val)
            }
          })
          this.courseList = list
          this.showEmpty = !this.courseList.length
          if (!data.length) {
          }
          //   } else {
          //     alert(data.desc)
          //   }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.transferred-course {
  background: #f8f8f8;
  // height: 100%;
  padding-top: 110px;
  width: 100%;
  float: left;
  clear: both;
  overflow-y: auto;
}
.transferred-course .condit-head {
  border-bottom: none;
}
.tips {
  height: 119px;
  padding: 0 30px;
  color: #666;
  font-size: 24px;
  line-height: 2;
  margin-top: 80px;
}
.tips span {
  color: #ff7800;
}
.info {
  background-color: #ffffff;
  border-bottom: 2px solid #f2f2f2;
  height: 88px;
  line-height: 88px;
  padding-left: 30px;
  color: #333;
  font-size: 28px;
}
.top-search {
  background: #03a9f4;
  height: 92px;
  line-height: 92px;
  position: fixed;
  width: 100%;
  z-index: 100;
  display: flex;
  display: -webkit-flex;
  top: 0;
}

.top-search .input-div {
  height: 92px;
  flex: 1;
  -webkit-box-flex: 1;
  /*width: 55%;*/
  margin: auto;
  line-height: 92px;
  border-radius: 6px;
  position: relative;
  top: 2px;
}

.input-div input {
  width: 100%;
  height: 62px;
  line-height: 62px;
  border-radius: 60px;
  border: none;
  font-size: 28px;
  padding: 0 10px;
  box-sizing: border-box;
}

.input-div img {
  position: absolute;
  padding: 26px 10px;
  right: 0;
  top: 0;
  width: 34px;
}

.top-location {
  /*position: absolute;*/
  padding: 0 40px;
  height: 92px;
  padding-right: 20px;
}

.top-location.home img {
  width: 48px;
  height: 40px;
  position: relative;
  top: 12px;
}

.top-location.home {
  padding-left: 0;
}

.top-location img {
  width: 28px;
  position: relative;
  top: 16px;
}

.top-right {
  /*position: absolute;*/
  width: 58px;
  right: 0;
  top: 0;
  padding-right: 29px;
  padding-left: 30px;
  padding-top: 13px;
  padding-bottom: 8px;
  height: 70px;
}

.top-right img {
  width: 56px;
}

.all-condit {
  height: 70px;
  line-height: 70px;
  color: #999;
  font-size: 28px;
  position: fixed;
  /*border-bottom: 2px solid #eee;*/
  width: 100%;
  z-index: 1;
  top: 110px;
}

.condit-head {
  border-bottom: 2px solid #ccc;
  width: 100%;
  text-align: center;
  background: white;
  display: flex;
  display: -webkit-flex;
}

.condit-head li {
  display: block;
  flex: 1;
  -webkit-box-flex: 1;
  position: relative;
  height: 68px;
}

.condit-head li .line {
  border-right: 2px solid #eee;
  height: 60%;
  position: absolute;
  right: 0;
  top: 20%;
  width: 0;
}

.condit-head li.active {
  color: #03a9f4;
}

.condit-head li img {
  /*display: inline-block;*/
  width: 20px;
  position: absolute;
  top: 30px;
  right: 10px;
  transform: rotate(-90deg);
}

.condit-head .show-text {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask {
  position: fixed;
  background: black;
  opacity: 0.2;
  height: 100%;
  width: 100%;
  left: 0;
}

.condit-list {
  position: fixed;
  background: white;
  width: 100%;
  text-align: center;
}

.condit-list li {
  box-sizing: border-box;
}

.condit-left {
  width: 50%;
  height: 400px;
  background: #f2f2f2;
  overflow-y: scroll;
}

.condit-left-li {
  color: #333;
  border-bottom: 2px solid #ccc;
  border-right: 2px solid #ccc;
  height: 64px;
  line-height: 64px;
}

.all-area {
  background-color: #f2f2f2;
}

.all-area.active {
  border-left: 6px solid #03a9f4;
  color: #03a9f4;
  background: white;
  border-right: 0;
}

.condit-left-li.active {
  border-left: 6px solid #03a9f4;
  color: #03a9f4;
  background: white;
  border-right: 0;
}

.condit-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 400px;
  overflow-y: scroll;
  text-align: left;
}

.condit-right-li {
  color: #666;
}

.condit-right-li.active {
  color: #03a9f4;
}

.condit-right-li p {
  margin: 0 20px;
  border-bottom: 2px solid #eee;
}

.condit-right-li p .dox {
  display: inline-block;
  width: 100%;
  height: 60px;
}

.condit-right-li p .dox.active {
  color: #03a9f4;
}

.course-list {
  padding-bottom: 100px;
  //   height: 600px;
  //   overflow-y: scroll;
}
.course-list li {
  background: white;
  width: 100%;
  display: flex;
  padding: 0;
  position: relative;
  margin: 20px 0;
}

.course-list li:first-child {
  margin-top: 0;
}

.course-select {
  display: inline-block;
  width: 15%;
  text-align: center;
  vertical-align: top;
}

.course-select span {
  position: absolute;
  top: 50%;
  margin-top: -18px;
  left: 32px;
  transform: translateY(-50%);
}

.course-select input {
  width: 126px;
  height: 250px;
  position: absolute;
  opacity: 0;
  transform: translateX(-50%) translateY(-45%);
}

.course-select label {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(../assets/img/choose_empty@3x.png);
  background-size: 100% 100%;
}

.course-select input:checked + label {
  background-image: url(../assets/img/choose_blue@3x.png);
}

.course-detail {
  width: 85%;
}
.icon-next {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  line-height: 88px;
  color: white;
  font-size: 36px;
  background: #3271f1;
  text-align: center;
}
.confirm-info {
  position: fixed;
  top: 109px;
  left: 25px;
  right: 25px;
  bottom: 120px;
  z-index: 10000;
  background-color: #fff;
  border-radius: 10px;
}
.confirm-info-mask {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.confirm-info .wrapper {
  padding: 0 32px 10px 32px;
  overflow-y: scroll;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 100px;
  left: 0;
}
.confirm-info .wrapper h2 {
  text-align: center;
  font-size: 33px;
  color: #333;
  font-weight: normal;
  height: 100px;
  line-height: 100px;
  border-bottom: 2px dashed #7d7d7d;
}
.confirm-info .wrapper .title {
  margin-top: 32px;
  font-size: 25px;
  margin-bottom: 20px;
  position: relative;
}
.confirm-info .wrapper .last-title {
  margin-top: 42px;
  margin-bottom: 30px;
}
.confirm-info .wrapper .content {
  padding: 20px 30px;
  border-radius: 10px;
  background-color: #fafafa;
}
.dire-icon {
  width: 55px;
  height: 80px;
  background: url('../assets/img/dire-icon.png') no-repeat;
  background-size: 100% 100%; 
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200000;
}
.confirm-info-footer {
  height: 100px;
  line-height: 100px;
  display: flex;
  justify-content: space-around;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 2px solid #ccc;
}
.confirm-info-footer span {
  width: 50%;
  font-size: 32px;
  text-align: center;
}
.confirm-info-footer span:last-child {
  border-left: 2px solid #ccc;
  color: #009ddd;
}
.transferred-course .confirm-info .wrapper .content .course-div {
  color: #666;
}

.more-course {
  bottom: 88px !important;
}
</style>
